<template>
  <view class="container">
    <!-- Header -->
    <view class="header">
      <text class="title">Learning Analytics</text>
      <view class="period-selector">
        <u-button-group>
          <u-button 
            :type="period === 'week' ? 'primary' : 'info'"
            :plain="period !== 'week'"
            @click="period = 'week'"
          >Week</u-button>
          <u-button 
            :type="period === 'month' ? 'primary' : 'info'"
            :plain="period !== 'month'"
            @click="period = 'month'"
          >Month</u-button>
          <u-button 
            :type="period === 'semester' ? 'primary' : 'info'"
            :plain="period !== 'semester'"
            @click="period = 'semester'"
          >Semester</u-button>
        </u-button-group>
      </view>
    </view>

    <!-- Statistics Content -->
    <scroll-view scroll-y class="content">
      <!-- Overview Cards -->
      <view class="stats-grid">
        <view class="stat-card">
          <view class="stat-icon" style="background-color: rgba(75, 123, 236, 0.1)">
            <u-icon name="clock" color="#4b7bec" size="32"></u-icon>
          </view>
          <view class="stat-info">
            <text class="stat-value">{{ stats.studyHours }}h</text>
            <text class="stat-label">Study Time</text>
          </view>
        </view>
        <view class="stat-card">
          <view class="stat-icon" style="background-color: rgba(46, 213, 115, 0.1)">
            <u-icon name="checkmark" color="#2ed573" size="32"></u-icon>
          </view>
          <view class="stat-info">
            <text class="stat-value">{{ stats.completedTasks }}</text>
            <text class="stat-label">Tasks Completed</text>
          </view>
        </view>
        <view class="stat-card">
          <view class="stat-icon" style="background-color: rgba(255, 71, 87, 0.1)">
            <u-icon name="star" color="#ff4757" size="32"></u-icon>
          </view>
          <view class="stat-info">
            <text class="stat-value">{{ stats.averageScore }}%</text>
            <text class="stat-label">Average Score</text>
          </view>
        </view>
        <view class="stat-card">
          <view class="stat-icon" style="background-color: rgba(255, 159, 67, 0.1)">
            <u-icon name="file-text" color="#ff9f43" size="32"></u-icon>
          </view>
          <view class="stat-info">
            <text class="stat-value">{{ stats.totalNotes }}</text>
            <text class="stat-label">Notes Created</text>
          </view>
        </view>
      </view>

      <!-- Study Time Distribution -->
      <view class="section">
        <view class="section-header">
          <text class="section-title">Study Time Distribution</text>
          <u-dropdown>
            <u-dropdown-item
              v-model="selectedSubject"
              :title="'Subject: ' + (selectedSubject || 'All')"
              :options="subjects"
            ></u-dropdown-item>
          </u-dropdown>
        </view>
        <view class="chart-container">
          <canvas canvas-id="studyTimeChart" class="chart"></canvas>
        </view>
      </view>

      <!-- Performance Trends -->
      <view class="section">
        <view class="section-header">
          <text class="section-title">Performance Trends</text>
        </view>
        <view class="chart-container">
          <canvas canvas-id="performanceChart" class="chart"></canvas>
        </view>
      </view>

      <!-- Activity Heatmap -->
      <view class="section">
        <view class="section-header">
          <text class="section-title">Activity Heatmap</text>
        </view>
        <view class="heatmap-container">
          <view class="weekday-labels">
            <text v-for="day in weekDays" :key="day">{{ day }}</text>
          </view>
          <view class="heatmap-grid">
            <view 
              v-for="(cell, index) in heatmapData"
              :key="index"
              class="heatmap-cell"
              :style="{
                backgroundColor: getHeatmapColor(cell.value)
              }"
            >
              <u-tooltip :content="cell.tooltip">
                <view class="cell-content"></view>
              </u-tooltip>
            </view>
          </view>
        </view>
      </view>

      <!-- Subject Performance -->
      <view class="section">
        <view class="section-header">
          <text class="section-title">Subject Performance</text>
        </view>
        <view class="subject-list">
          <view 
            v-for="subject in subjectPerformance"
            :key="subject.id"
            class="subject-item"
          >
            <view class="subject-info">
              <text class="subject-name">{{ subject.name }}</text>
              <text class="subject-score">{{ subject.score }}%</text>
            </view>
            <view class="progress-bar">
              <view 
                class="progress-fill"
                :style="{
                  width: subject.score + '%',
                  backgroundColor: getScoreColor(subject.score)
                }"
              ></view>
            </view>
            <view class="subject-stats">
              <view class="stat-item">
                <text class="stat-label">Tasks</text>
                <text class="stat-value">{{ subject.completedTasks }}/{{ subject.totalTasks }}</text>
              </view>
              <view class="stat-item">
                <text class="stat-label">Time</text>
                <text class="stat-value">{{ subject.studyHours }}h</text>
              </view>
            </view>
          </view>
        </view>
      </view>

      <!-- Learning Goals -->
      <view class="section">
        <view class="section-header">
          <text class="section-title">Learning Goals</text>
        </view>
        <view class="goals-list">
          <view 
            v-for="goal in learningGoals"
            :key="goal.id"
            class="goal-item"
          >
            <view class="goal-header">
              <text class="goal-title">{{ goal.title }}</text>
              <text :class="['goal-status', goal.status.toLowerCase()]">
                {{ goal.status }}
              </text>
            </view>
            <view class="goal-progress">
              <view class="progress-bar">
                <view 
                  class="progress-fill"
                  :style="{ width: goal.progress + '%' }"
                ></view>
              </view>
              <text class="progress-text">{{ goal.progress }}%</text>
            </view>
            <text class="goal-deadline">Due: {{ goal.deadline }}</text>
          </view>
        </view>
      </view>
    </scroll-view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      period: 'week',
      selectedSubject: null,
      stats: {
        studyHours: 42,
        completedTasks: 28,
        averageScore: 85,
        totalNotes: 15
      },
      subjects: [
        { label: 'All Subjects', value: null },
        { label: 'Anatomy', value: 'anatomy' },
        { label: 'Physiology', value: 'physiology' },
        { label: 'Pathology', value: 'pathology' },
        { label: 'Pharmacology', value: 'pharmacology' }
      ],
      weekDays: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
      heatmapData: Array.from({ length: 28 }, (_, i) => ({
        value: Math.floor(Math.random() * 10),
        tooltip: `${Math.floor(Math.random() * 8)} hours of study`
      })),
      subjectPerformance: [
        {
          id: 1,
          name: 'Anatomy',
          score: 92,
          completedTasks: 12,
          totalTasks: 15,
          studyHours: 18
        },
        {
          id: 2,
          name: 'Physiology',
          score: 88,
          completedTasks: 8,
          totalTasks: 10,
          studyHours: 12
        },
        {
          id: 3,
          name: 'Pathology',
          score: 78,
          completedTasks: 5,
          totalTasks: 8,
          studyHours: 8
        },
        {
          id: 4,
          name: 'Pharmacology',
          score: 85,
          completedTasks: 3,
          totalTasks: 5,
          studyHours: 4
        }
      ],
      learningGoals: [
        {
          id: 1,
          title: 'Complete Cardiovascular System Module',
          status: 'In Progress',
          progress: 75,
          deadline: '2024-04-15'
        },
        {
          id: 2,
          title: 'Submit Research Paper',
          status: 'Pending',
          progress: 30,
          deadline: '2024-05-01'
        },
        {
          id: 3,
          title: 'Lab Practice Hours',
          status: 'Completed',
          progress: 100,
          deadline: '2024-03-15'
        }
      ]
    }
  },
  mounted() {
    this.initCharts()
  },
  methods: {
    initCharts() {
      // TODO: Implement chart initialization using a charting library
      // This would include:
      // 1. Study Time Distribution Chart (Bar Chart)
      // 2. Performance Trends Chart (Line Chart)
    },
    getHeatmapColor(value) {
      // Generate color based on value (0-10)
      const intensity = (value / 10) * 0.8 + 0.2 // 0.2-1.0
      return `rgba(75, 123, 236, ${intensity})`
    },
    getScoreColor(score) {
      if (score >= 90) return '#2ed573'      // Green
      if (score >= 80) return '#4b7bec'      // Blue
      if (score >= 70) return '#ff9f43'      // Orange
      return '#ff4757'                       // Red
    }
  },
  watch: {
    period() {
      // TODO: Fetch and update statistics based on selected period
    },
    selectedSubject() {
      // TODO: Update study time distribution chart based on selected subject
    }
  }
}
</script>

<style lang="scss" scoped>
.container {
  min-height: 100vh;
  background-color: #f8f9fa;
  display: flex;
  flex-direction: column;
}

.header {
  background-color: #ffffff;
  padding: 30rpx;
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);

  .title {
    font-size: 36rpx;
    font-weight: bold;
    color: #333;
    margin-bottom: 20rpx;
  }

  .period-selector {
    display: flex;
    justify-content: center;
  }
}

.content {
  flex: 1;
  padding: 30rpx;
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20rpx;
  margin-bottom: 30rpx;

  .stat-card {
    background-color: #ffffff;
    padding: 20rpx;
    border-radius: 12rpx;
    display: flex;
    align-items: center;
    gap: 20rpx;

    .stat-icon {
      width: 80rpx;
      height: 80rpx;
      border-radius: 40rpx;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .stat-info {
      flex: 1;

      .stat-value {
        font-size: 32rpx;
        font-weight: bold;
        color: #333;
        margin-bottom: 4rpx;
      }

      .stat-label {
        font-size: 24rpx;
        color: #666;
      }
    }
  }
}

.section {
  background-color: #ffffff;
  border-radius: 12rpx;
  padding: 30rpx;
  margin-bottom: 30rpx;

  .section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20rpx;

    .section-title {
      font-size: 30rpx;
      font-weight: bold;
      color: #333;
    }
  }
}

.chart-container {
  height: 400rpx;

  .chart {
    width: 100%;
    height: 100%;
  }
}

.heatmap-container {
  .weekday-labels {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    margin-bottom: 10rpx;

    text {
      font-size: 24rpx;
      color: #666;
      text-align: center;
    }
  }

  .heatmap-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 4rpx;

    .heatmap-cell {
      aspect-ratio: 1;
      border-radius: 4rpx;
    }
  }
}

.subject-list {
  .subject-item {
    margin-bottom: 30rpx;

    .subject-info {
      display: flex;
      justify-content: space-between;
      margin-bottom: 10rpx;

      .subject-name {
        font-size: 28rpx;
        color: #333;
      }

      .subject-score {
        font-size: 28rpx;
        font-weight: bold;
        color: #333;
      }
    }

    .progress-bar {
      height: 16rpx;
      background-color: #f0f2f5;
      border-radius: 8rpx;
      overflow: hidden;
      margin-bottom: 10rpx;

      .progress-fill {
        height: 100%;
        border-radius: 8rpx;
        transition: width 0.3s ease;
      }
    }

    .subject-stats {
      display: flex;
      gap: 30rpx;

      .stat-item {
        .stat-label {
          font-size: 24rpx;
          color: #666;
          margin-right: 10rpx;
        }

        .stat-value {
          font-size: 24rpx;
          color: #333;
        }
      }
    }
  }
}

.goals-list {
  .goal-item {
    background-color: #f8f9fa;
    border-radius: 8rpx;
    padding: 20rpx;
    margin-bottom: 20rpx;

    .goal-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 16rpx;

      .goal-title {
        font-size: 28rpx;
        color: #333;
      }

      .goal-status {
        font-size: 24rpx;
        padding: 4rpx 16rpx;
        border-radius: 20rpx;

        &.completed {
          background-color: rgba(46, 213, 115, 0.1);
          color: #2ed573;
        }

        &.in.progress {
          background-color: rgba(75, 123, 236, 0.1);
          color: #4b7bec;
        }

        &.pending {
          background-color: rgba(255, 159, 67, 0.1);
          color: #ff9f43;
        }
      }
    }

    .goal-progress {
      display: flex;
      align-items: center;
      gap: 16rpx;
      margin-bottom: 12rpx;

      .progress-bar {
        flex: 1;
        height: 12rpx;
        background-color: #e4e7eb;
        border-radius: 6rpx;
        overflow: hidden;

        .progress-fill {
          height: 100%;
          background-color: #4b7bec;
          border-radius: 6rpx;
          transition: width 0.3s ease;
        }
      }

      .progress-text {
        font-size: 24rpx;
        color: #666;
        min-width: 60rpx;
      }
    }

    .goal-deadline {
      font-size: 24rpx;
      color: #666;
    }
  }
}
</style> 